<template>
	<view class="content">
		<tabbar class="tabbar" :dataArray="dataArray" :checkedIndex="checkedIndex" @handleIndexChange="typeChange">
		</tabbar>
		<scroll-view scroll-y="true" class="list">
			<orderItem v-for="(item,index) in dataList" :id="item.id" :typeCode="item.typeCode"
				:typeName="item.typeName" :img="item.actImg" :title="item.actTitle" :location="item.actLocation"
				:date="item.orderStart" :createTime="item.createTime" :isTeam="item.isTeam" :num="item.num"
				:isCanceled="item.isCanceled" @cancel="cancel"></orderItem>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getUrlParam,
		getCode
	} from '../../js_sdk/utils.js'
	import tabbar from '../customer/tabbar.vue'
	import orderItem from '../customer/orderItem.vue'
	import {
		listPage,
		doGet,
		doPostForm
	} from '../../js_sdk/request-helper.js'
	export default {
		components: {
			tabbar,
			orderItem
		},
		data() {
			return {
				userId: undefined,
				checkedIndex: 0,
				dataArray: [
					"参观",
					"特展",
					"社教活动",
					"讲座",
				],
				checked: false,
				checkedList: [
					'../../static/guided_icon_check_default@2x.png',
					'../../static/guided_icon_check_clicked@2x.png'
				],
				isDesc: false,
				orderByList: [
					'../../static/guided_icon_sequence_default@2x.png',
					'../../static/guided_icon_sequence_clicked@2x.png'
				],

				dataList: []
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('userInfo')) {
				let museumId = getUrlParam('museumId')
				let code = getCode(listPage, museumId)
				if (code) {
					if (!uni.getStorageSync('museumId')) {
						uni.setStorageSync('museumId', getUrlParam('state'))
					}
					this.wxLogin(code)
				}
			}else{
				this.userId = uni.getStorageSync('userInfo').id
				if (options.index) {
					this.checkedIndex = parseInt(options.index) - 1
				}
				this.getList()
			}
		},
		methods: {
			wxLogin(code) {
				doGet('/blade-museum/user/wxLogin?code=' + code +
					'&museumId=' + uni.getStorageSync('museumId'), (res) => {
						uni.setStorageSync('userInfo', res)
						this.userId = res.id
						this.getList()
					}, (err) => {
						uni.showToast({
							icon: 'error',
							title: err
						})
					})
			},
			typeChange(index) {
				this.checkedIndex = index
				this.getList()
			},
			getList() {
				doPostForm('/blade-order/ord/list', {
					userId: this.userId,
					typeCode: this.checkedIndex + 1,
					pages: 1,
					size: 10
				}, (res) => {
					this.dataList = res.records
				}, (err) => {

				})
			},
			cancel(id) {
				uni.showModal({
					title: '取消预约',
					content: '您确定要取消本次预约吗？',
					cancelColor: '#B9AC90',
					confirmColor: '#AE6059',
					success: function(res) {
						if (res.confirm) {
							doGet('/blade-order/ord/cancel?id=' + id, (res) => {
								uni.showToast({
									title: '取消成功',
								})
								this.getList()
							}, (err) => {
								uni.showToast({
									title: err,
									icon: 'error'
								})
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		position: fixed;
		width: 100%;
		background: #eee;
		height: calc(100% - 88rpx);
	}

	.tabbar {
		background: #fff;
	}

	.list {
		width: 100%;
		height: calc(100% - 100rpx);
	}
</style>
